<template>
  <div>
    <base-list ref="accountSearch"
               :condition="condition"
               :datas.sync="accountSearch"
               :pageSearch="pageSearch">
      <el-form :inline="true"
               :model="condition"
               class="search-form"
               slot="search"
               label-width="80px">
        <el-row>
          <el-col :span="7"
                  class="search-width4">
            <el-form-item label="账户名称">
              <auto-search-name searchName="name"
                                @selectName="v=>condition['search_LIKE_name']=v"></auto-search-name>
            </el-form-item>
          </el-col>
          <el-col :span="7"
                  class="search-width4">
            <el-form-item label="助记码">
              <auto-search-mnemonicCode searchName="mnemonicCode"
                                        @selectName="v=>condition['search_LIKE_mnemonicCode']=v"></auto-search-mnemonicCode>
            </el-form-item>
          </el-col>
          <el-col :span="7"
                  class="search-width4">
            <el-form-item label="账户类型">
              <el-select v-model="condition['search_EQ_accountType']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="[key, val] in _dictAccountTypes"
                           :key="key"
                           :label="val"
                           :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7"
                  class="search-width4">
            <el-form-item label="账户性质">
              <el-select v-model="condition['search_EQ_accountNature']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="[key, val] in _dictAccountNature"
                           :key="key"
                           :label="val"
                           :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7"
                  class="search-width4">
            <el-form-item label="所属单位"
                          prop="orgId">
              <auto-search-org v-model="form.orgId"
                               @select="v=>{form.orgId=v;form.deptId='';form.deptName='';}"
                               @selectName="v=>form.orgName=v"
                               :disabled="true"
                               :name="form.orgName"></auto-search-org>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button type="primary"
                       icon="el-icon-search"
                       class="ml-80"
                       @click="loadData">查 询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row slot="status">
        <el-button type="primary"
                   icon="el-icon-remove-outline"
                   @click="noSettlement(multipleTable)">禁止结算</el-button>
        <el-button type="primary"
                   icon="el-icon-edit-outline"
                   @click="yesSettlement(multipleTable)">恢复结算</el-button>
        <el-button type="primary"
                   icon="el-icon-edit-outline"
                   @click="salesAccount(multipleTable)">开户客户销户</el-button>
        <el-button type="primary"
                   icon="el-icon-edit-outline"
                   @click="openAccount(multipleTable)">结算客户开户</el-button>
      </el-row>
      <el-table slot="list"
                :data="accountSearch"
                border
                stripe
                @selection-change="handleSelectionChange"
                max-height="500">
        <el-table-column type="selection"
                         width="50"></el-table-column>
        <el-table-column label="序号"
                         type="index"
                         width="50"></el-table-column>
        <el-table-column prop="mnemonicCode"
                         label="助记码"
                         min-width="120"></el-table-column>
        <el-table-column prop="name"
                         label="账户名称"
                         min-width="150"></el-table-column>
        <el-table-column prop="customerName"
                         label="客户名称"
                         min-width="200">
          <template slot-scope="scope">
            <div class="customerName"
                 @click="handleViewDialogForm(scope.row)">{{scope.row.customerName}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="disableSettle"
                         label="是否禁止结费"
                         min-width="150">
          <template slot-scope="scope">
            {{ scope.row.disableSettle | _filterTrueOrFalse }}
          </template></el-table-column>
        <el-table-column prop="accountTypeDesc"
                         label="账户类型"
                         min-width="120"></el-table-column>
        <el-table-column prop="accountNatureDesc"
                         label="账户性质"
                         min-width="150"></el-table-column>
        <el-table-column prop="pallets"
                         label="是否托盘客户"
                         min-width="120">
          <template slot-scope="scope">
            {{ scope.row.pallets | _filterTrueOrFalse }}
          </template>
        </el-table-column>
        <el-table-column prop="ifSteelMillUnit"
                         label="是否为钢厂"
                         min-width="150">
          <template slot-scope="scope">
            {{ scope.row.ifSteelMillUnit | _filterTrueOrFalse }}
          </template>
        </el-table-column>
        <el-table-column prop="overdueTypeDesc"
                         label="逾期类型"
                         min-width="150"></el-table-column>
        <el-table-column prop="overdueValue"
                         label="逾期值（天/元）"
                         min-width="150"></el-table-column>
        <!-- <el-table-column prop="overdueValue"
                         label="逾期值（元）"
                         min-width="120"></el-table-column> -->
        <el-table-column prop="statistics"
                         label="报表是否统计"
                         min-width="150">
          <template slot-scope="scope">
            {{ scope.row.statistics | _filterTrueOrFalse }}
          </template>
        </el-table-column>
        <el-table-column prop="attachments"
                         label="附件信息"
                         min-width="220">
          <template slot-scope="scope">
            <download v-model="scope.row.attachments"></download>
          </template>
        </el-table-column>
        <el-table-column fixed="right"
                         align="center"
                         label="操作"
                         width="140">
          <template slot-scope="scope">
            <el-button size="small"
                       type="text"
                       @click="handleDialogFormOpen(true,scope.row)">
              编辑
            </el-button>
            <el-button type="text"
                       class="danger"
                       size="small"
                       @click="handleRemove(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </base-list>
    <div style="text-align:center">
      <el-button plain
                 type="info"
                 @click="handleRouterPush({path:'/goods/business',name:'商务管理工作台'})">返回</el-button>
    </div>
    <add-account-form ref="addAccountForm"
                      @load="loadData"></add-account-form>
    <view-customer-form ref="viewCustomerForm"></view-customer-form>
  </div>
</template>

<script>
import {
  getAccountList,
  delAccount,
  disableSettle,
  enableSettle,
  toSettlement,
  toOpen
} from '@/api/commerce/account'
import { getCustomList } from '@/api/commerce/customer' //客户名称表格
import autoSearchOrg from '@/components/autocomplete/autoSearchOrg'
import autoSearchName from '@/components/autocomplete/autoSearchName'
import autoSearchMnemonicCode from '@/components/autocomplete/autoSearchMnemonicCode'
import download from '@/components/download'
import addAccountForm from './addAccountForm'
import viewCustomerForm from './viewCustomerForm'

export default {
  name: 'accountSearch',
  components: {
    autoSearchOrg,
    autoSearchName,
    autoSearchMnemonicCode,
    download,
    addAccountForm,
    viewCustomerForm
  },
  data() {
    return {
      form: this.clearForm(),
      condition: {}, // 查询条件
      accountSearch: [], // table数组
      pageSearch: getAccountList, // 分页查询api接口
      id: '',
      multipleTable: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadData()
    })
  },
  methods: {
    clearForm() {
      return {
        orgId: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.name
      }
    },

    loadData() {
      this.$refs.accountSearch.loadData()
    },
    handleSelectionChange(val) {
      this.multipleTable = val
    },
    // 编辑
    handleDialogFormOpen(bool, item) {
      if (bool) {
        console.log('编辑',item)
        this.$refs.addAccountForm.form = JSON.parse(JSON.stringify(item))
        this.$refs.addAccountForm.isEdit = true
        this.$refs.addAccountForm.dialogForm = true
      } else {
        this.$refs.addAccountForm.dialogForm = true
      }
    },
    // 点击账户列表中的客户单位，查看客户详情
    handleViewDialogForm(val) {
      getCustomList().then(res => {
        let data = res.data.aaData
        for (let item of data) {
          if (val.customerId === item.id) {
            this.$refs.viewCustomerForm.form = item
          }
        }
      })
      this.$refs.viewCustomerForm.dialogForm = true
    },
    handleRemove(item) {
      this.$confirm(`是否删除该数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delAccount(item.id).then(res => {
            this.$message({
              type: 'success',
              message: `删除成功!`
            })
            this.loadData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    //禁止结算
    noSettlement(row) {
      if (row.length === 0) {
        this.$message({ message: '请至少选择一条数据', type: 'error' })
      }
      // else if (noSettlement) {
      //   this.$message({
      //     message: '数据已经禁止结算，请重新选择',
      //     type: 'error'
      //   })
      // }
      else {
        this.$confirm('确认要禁止结算吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            let id = []
            for (let i = 0; i < row.length; i++) {
              row[i].disableSettle = true
              id.push(row[i].id)
            }
            disableSettle(id).then(res => {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            })
          })
      }
    },
    //恢复结算
    yesSettlement(row) {
      if (row.length === 0) {
        this.$message({ message: '请至少选择一条数据', type: 'error' })
      } else {
        this.$confirm('确认要恢复结算吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            let id = []
            for (let i = 0; i < row.length; i++) {
              row[i].disableSettle = false
              id.push(row[i].id)
            }
            enableSettle(id).then(res => {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            })
          })
      }
    },
    //开户客户销户
    salesAccount(row) {
      if (row.length === 0) {
        this.$message({ message: '请至少选择一条数据', type: 'error' })
      } else {
        for (let i = 0; i < row.length; i++) {
          if (row[i].accountNature !== 'OPENED') {
            this.$message({
              message: '所选客户不是开户客户，请重新选择',
              type: 'error'
            })
            break
          } else {
            this.$confirm('确认要销户吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(() => {
                let id = []
                for (let i = 0; i < row.length; i++) {
                  if (row[i].accountNature === 'OPENED') {
                    row[i].accountNature = 'SEMTTLEMENT'
                  }
                  id.push(row[i].id)
                }
                toSettlement(id).then(res => {
                  this.$message({
                    type: 'success',
                    message: '操作成功!'
                  })
                  this.loadData()
                })
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消操作'
                })
              })
          }
        }
      }
    },
    //结算客户开户
    openAccount(row) {
      if (row.length === 0) {
        this.$message({ message: '请至少选择一条数据', type: 'error' })
      } else {
        for (let i = 0; i < row.length; i++) {
          if (row[i].accountNature !== 'SEMTTLEMENT') {
            this.$message({
              message: '所选客户不是结算客户，请重新选择',
              type: 'error'
            })
            break
          } else {
            this.$confirm('确认要销户吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(() => {
                let id = []
                for (let i = 0; i < row.length; i++) {
                  if (row[i].accountNature === 'SEMTTLEMENT') {
                    row[i].accountNature = 'OPENED'
                  }
                  id.push(row[i].id)
                }
                toOpen(id).then(res => {
                  this.$message({
                    type: 'success',
                    message: '操作成功!'
                  })
                  this.loadData()
                })
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消操作'
                })
              })
          }
        }
      }
    },
    handleRouterPush(val) {
      this.$store.commit('ADD_CACHED_VIEWS', val)
      this.$router.push(val.path)
    }
  }
}
</script>

<style scoped>
.customerName {
  color: blue;
  cursor: pointer;
}
</style>
